import { Button, DatePicker, Flex, Form, Input, Modal, Pagination, Table } from "antd";
import { UploadOutlined } from '@ant-design/icons';
import style from '../css/OperationLog.module.scss'
import { TableProps } from "antd/lib";
import { useState } from "react";
import { exportDataToExcel } from '../components/exportToExcel'

function OperationLog() {
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    // 表格数据
    interface DataType {
        key: string;
        order: string;
        module: string;
        type: string;
        staff: string;
        address: string;
        operatetime: string;
        consumetime: string
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'order',
            key: 'order',
            width: '102px'
        },
        {
            title: '系统模块',
            dataIndex: 'module',
            key: 'module',
            width: '152px'
        },
        {
            title: '操作类型',
            dataIndex: 'type',
            key: 'type',
            width: '138px',
            render: (text) => (
                text == '新增' ?
                    <p style={{ width: 61, height: 32, boxSizing: 'border-box', lineHeight: '32px', textAlign: 'center', border: '1px solid #0648ff', color: '#0648ff' }}>{text}</p>
                    :
                    text == '修改' ?
                        <p style={{ width: 61, height: 32, boxSizing: 'border-box', lineHeight: '32px', textAlign: 'center', border: '1px solid #F59A23', color: '#F59A23' }}>{text}</p>
                        :
                        text == '删除' ?
                            <p style={{ width: 61, height: 32, boxSizing: 'border-box', lineHeight: '32px', textAlign: 'center', border: '1px solid #D9001B', color: '#D9001B' }}>{text}</p>
                            :
                            <p style={{ width: 61, height: 32, boxSizing: 'border-box', lineHeight: '32px', textAlign: 'center', border: '1px solid #D9001B', color: '#D9001B' }}>{text}</p>
            )
        },
        {
            title: '操作人员',
            key: 'staff',
            dataIndex: 'staff',
            width: '141px'
        },
        {
            title: '操作地址',
            key: 'address',
            dataIndex: 'address',
            width: '141px'
        },
        {
            title: '操作时间',
            key: 'operatetime',
            dataIndex: 'operatetime',
            width: 183
        },
        {
            title: '消耗时间',
            key: 'consumetime',
            dataIndex: 'consumetime',
            width: 121
        },
        {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 205,
            render: () => <a onClick={()=>Logdetails()}>日志详情</a>
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            order: '1',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '2',
            order: '2',
            module: '患者登记',
            type: '修改',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '3',
            order: '3',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '4',
            order: '4',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '5',
            order: '5',
            module: '患者登记',
            type: '删除',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '6',
            order: '6',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '7',
            order: '7',
            module: '患者登记',
            type: '退号',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '8',
            order: '8',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '9',
            order: '9',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
        {
            key: '10',
            order: '10',
            module: '患者登记',
            type: '新增',
            staff: '张三',
            address: '192.100.200.102',
            operatetime: '2020-01-02 09:00:30',
            consumetime: '43ms',
        },
    ];
    // 重置
    const reset=()=>{
        console.log('重置')
    }
    // 查询
    const select=()=>{
        console.log('查询')
        form.validateFields().then(values => {
            console.log('Validated values: ', values);
        }).catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    // 导出
    const exports=()=>{
        exportDataToExcel(data, 'OperationLog.xlsx');
    }
    // 日志详情
    const [Logshow,setLogshow] = useState(false)
    const Logdetails=()=>{
        console.log('日志详情')
        setLogshow(true)
    }
    // 日志详情关闭
    const LogdetailsCancel=()=>{
        console.log('关闭')
        setLogshow(false)
    }
    return (
        <>
            <Modal
                title='日志详情'
                open={Logshow}
                width={402}
                footer={false}
                onCancel={LogdetailsCancel}
            >
                <ul className={style.table}>
                    <li>
                        <p>操作人员：</p><p>张三</p>
                    </li>
                    <li>
                        <p>操作地址：</p><p>192.100.200.102</p>
                    </li>
                    <li>
                        <p>操作模块：</p><p>患者登记</p>
                    </li>
                    <li className={style.center}>
                        <p>操作类型：</p><p className={style.operatetype}>新增</p>
                    </li>
                    <li>
                        <p>请求地址：</p><p>/system/user</p>
                    </li>
                    <li>
                        <p>请求方式：</p><p>POST</p>
                    </li>
                    <li>
                        <p>操作方法：</p><p style={{width:287,whiteSpace:'normal'}}>com.ruoyi.web.controller.system.SysUserController.add()</p>
                    </li>
                    <li>
                        <p>请求参数：</p><p style={{width:287,whiteSpace:'normal'}}>'"admin":false,"createBy":"admin","nickName":"40450","params":{},"postIds":[],"roleIds":[],"status":"0","userId":100,"userName":"450450"'</p>
                    </li>
                    <li>
                        <p>消耗时间：</p><p>43ms</p>
                    </li>
                    <li>
                        <p>操作时间：</p><p>2020-01-02 09:00:30</p>
                    </li>
                </ul>
            </Modal>
            <Form
                className={style.searchboxs}
                form={form}
            >
                <Flex align='center' style={{ height: '100%' }}>
                    <Form.Item name='module' label='系统模块' className={style.itemstyle}>
                        <Input placeholder='请输入' style={{ width: 176, height: 32, borderRadius: 0 }}></Input>
                    </Form.Item>
                    <Form.Item label='操作人员' name='staff' className={style.itemstyle}>
                        <Input placeholder='请输入' style={{ width: 176, height: 32, borderRadius: 0 }}></Input>
                    </Form.Item>
                    <Form.Item label='操作时间' name='time' className={style.itemstyle}>
                        <RangePicker style={{ width: 224, height: 32 }} />
                    </Form.Item>
                </Flex>
                <Flex>
                    <Button onClick={() => reset()} style={{
                        width: 61,
                        height: 32,
                        marginRight: 10,
                        borderRadius: 0
                    }}>重置</Button>
                    <Button onClick={()=>select()} style={{
                        width: 60,
                        height: 32,
                        borderRadius: 0
                    }} type="primary" >
                        查询
                    </Button>
                </Flex>
            </Form>
            <div className={style.datalists}>
                <Flex justify='flex-end'>
                    <Button onClick={()=>exports()} style={{ width: 75, height: 32, borderRadius: 0, color: '#00A76F', borderColor: '#00A76F' }} icon={<UploadOutlined />}>导出</Button>
                </Flex>
                <Table<DataType> className={style.tabledata} columns={columns} pagination={false} scroll={{ x: 'max-content' }} dataSource={data} />
                <Pagination style={{ marginTop: 20 }} showQuickJumper defaultCurrent={2} total={50} showTotal={(total) => `共 ${total} 条数据`} align="end" />
            </div>
        </>
    );
}

export default OperationLog;